<template>
    <div>
        <div class="plan-item" :class="{'not': plan.status == 0}">
            <div class="plan-wrap">
                <div class="plan-content">
                    <div class="day">
                        <div class="desc">day {{  10 > plan.section_day ? '0' +  plan.section_day : plan.section_day}}</div>
                        <div class="clock">
                            <img src="https://mobuz-mp.cdn.bcebos.com/matter/complete_02@2x.png" v-if="plan.clock_state == 1">
                        </div>
                    </div>
                    <div class="title">{{plan.section_name}}</div>
                    <div class="rate" v-if="starShow">
                        <div class="star">
                            <img v-for="star in 3" :key="star" :src="plan.all_start >= star+1? 'https://mobuz-mp.cdn.bcebos.com/matter/star_fill@2x.png' :'https://mobuz-mp.cdn.bcebos.com/matter/star_empty@2x.png'">
                        </div>
                        <div class="score">{{plan.status == 0 ? '---' : plan.all_score}}</div>
                    </div>
                </div>
                <div class="plan-banner" :class="{'not_banner': !plan.section_cover}">
                    <img :src="plan.section_cover">
                </div>
            </div>
            <img class="not-unlock" v-if="plan.status == 0" src="https://mobuz-mp.cdn.bcebos.com/matter/willPlanTableNotUnlock.png">
        </div>
     </div>
</template>
<script>
export default {
    props:['plan','starShow'],
    data () {
        return {
        }
    }
}
</script>
<style lang="less" scoped>
.plan-item {
    height: 270rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    line-height: 1;
    filter: grayscale(0%);
    &.not {
        filter: grayscale(70%);
    }
    .not-unlock {
        position: absolute;
        left: 218rpx;
        top: 15rpx;
        display: block;
        width: 165rpx;
        height: 127rpx;
    }
    .plan-wrap {
        padding: 35rpx 30rpx 35rpx 34rpx;
        .plan-content {
            height: 100%;
            padding-right: 363rpx;
            .day {
                font-size: 0;
                > div {
                    display: inline-block;
                    vertical-align: middle;
                    &.desc {
                        font-family: PingFangSC-Medium;
                        font-size: 36rpx;
                        color: #333333;
                        letter-spacing: 0.73rpx;
                        line-height: 50rpx;
                    }
                    &.clock {
                        margin-left: 30rpx;
                        width: 30rpx;
                        height: 50rpx;
                        position: relative;
                        img {
                            display: block;
                            position: absolute;
                            top: 50%;
                            margin-top: -15rpx;
                            vertical-align: middle;
                            width: 30rpx;
                            height: 30rpx;
                            align-items: center;
                        }
                    }
                }
            }
            .title {
                font-family: PingFangSC-Regular;
                font-size: 32rpx;
                color: #666666;
                letter-spacing: 0.65px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                line-height: 45rpx;
            }
            .rate {
                position: absolute;
                bottom: 35rpx;
            > div {
                display: inline-block;
            }
            .star {
                width: 128rpx;
                font-size: 0;
                vertical-align:  middle;
                img {
                width: 30rpx;
                height: 30rpx;
                margin-right: 10rpx;
                vertical-align:  middle;
                }
            }
            .score {
                padding-left: 18rpx;
                font-family: PingFangSC-Medium;
                font-size: 30rpx;
                color: #151515;
                letter-spacing: 1rpx;
                line-height: 30rpx;
                height: 30rpx;
                position: relative;
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 2rpx;
                    height: 30rpx;
                    background-color: #151515;
                    }
                }
            }
        }
        .plan-banner {
            position: absolute;
            top: 35rpx;
            right: 30rpx;
            width: 280rpx;
            height: 200rpx;
            border-radius: 10rpx;
            overflow: hidden;
            &.not_banner {
                background-color: #333333;
            }
            img {
                width: 280rpx;
                height: 200rpx;
                border-radius: 10rpx;
                overflow: hidden;
            }
        }
    }
}
</style>